<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:insert="~{include :: header('讲师列表')}" />
    <th:block th:insert="~{include :: bootstrap-table-css}" />
</head>
<body class="hold-transition">
<div class="container-fluid mb-2">
    <div class="toolbar" id="toolbar" role="group">
        <form id="formId">
            <div class="form-inline">
                <a class="btn btn-success mr-1" onclick="$.operate.add(0,'85%','98%')" shiro:hasPermission="teacher:add">
                    <i class="fa fa-plus"></i> 添加
                </a>
                <input type="text" class="form-control mr-1" name="searchKey" placeholder="名称/手机">
                <select name="starId" class="form-control mr-1" th:with="type=${@dict.getType('qdx_teacher_title')}">
                    <option value="">职称</option>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                </select>
                <button type="button" class="btn btn-primary mr-1" onclick="$.table.search()">
                    <i class="fa fa-search"></i>
                    搜索
                </button>
                <button type="button" class="btn btn-default" onclick="$.form.reset()">
                    <i class="fa fa-refresh"></i>
                    重置
                </button>
            </div>
        </form>
    </div>
    <table id="bootstrap-table" class="table-striped"></table>
</div>
<th:block th:insert="~{include :: footer}" />
<th:block th:insert="~{include :: bootstrap-table-js}" />
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('teacher:edit')}]];
    var removeFlag = [[${@permission.hasPermi('teacher:remove')}]];
    var starDicts = [[${@dict.getType('qdx_teacher_title')}]];
    var sexDicts = [[${@dict.getType('qdx_user_sex')}]];
    var prefix = "/teacher";

    $(function() {
        var options = {
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            url: prefix + "/list.json",
            createUrl: prefix + "/add.html",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove.json",
            modalName: "讲师",
            columns: [
                {
                    field: 'id',
                    title: 'id',
                    width: '80px'
                },
                {
                    field: 'avatar',
                    title: '头像',
                    width: '80px',
                    align: 'center',
                    formatter: function (value, row, index) {
                        if (value == null || value === '') {
                            return "<img class='img-circle img-xs' data-height='50' data-width='50' data-target='self' src='/static/img/user.png'/>"
                        } else {
                            return $.common.sprintf("<img class='img-circle img-xs' height='50' width='50' data-target='self' src='%s'/>", value);
                        }
                    }
                },
                {
                    field: 'name',
                    title: '姓名(手机)/标签',
                    formatter: function (value, row, index) {
                        return row.name + '(' + row.mobile + ')<br /><span class="badge">' + row.tags + '</span>';
                    }
                },
                {
                    field: 'sex',
                    title: '性别',
                    width: '60px',
                    align: 'center',
                    formatter: function (value, row, index) {
                        return $.table.selectDictLabel(sexDicts, value);
                    }
                },
                {
                    field: 'nativePlace',
                    title: '籍贯/生日',
                    width: '120px',
                    align: 'center',
                    formatter: function (value, row, index) {
                        return (row.nativePlace ? row.nativePlace : '-') + '<br />' + (row.birthday ? row.birthday : '-');
                    }
                },
                {
                    field: 'starId',
                    title: '学历/职称',
                    width: '100px',
                    align: 'center',
                    formatter: function (value, row, index) {
                        return (row.education ? row.education : '-') + '<br />' + $.table.selectDictLabel(starDicts, value);
                    }
                },
                {
                    field: 'viewCount',
                    title: '浏览',
                    width: '80px',
                    align: 'center',
                    formatter: function (value, row, index) {
                        return '<span class="text-red">' + value + '</span>';
                    }
                },
                {
                    field: 'likeCount',
                    title: '点赞',
                    width: '80px',
                    align: 'center',
                    formatter: function (value, row, index) {
                        return '<span class="text-red">' + value + '</span>';
                    }
                },
                {
                    field: 'sort',
                    title: '属性',
                    align: 'center',
                    width: '80px',
                    formatter: function (value, row, index) {
                        var actions = [];
                        if (row.isElite === 1) {
                            actions.push('<span class="badge badge-primary">推荐</span>');
                        } else {
                            actions.push('<span class="badge badge-secondary">推荐</span>');
                        }
                        actions.push('<br />');
                        if (row.isTop === 1) {
                            actions.push('<span class="badge badge-danger">固顶</span>');
                        } else {
                            actions.push('<span class="badge badge-secondary">固顶</span>');
                        }
                        return actions.join('');
                    }
                },
                {
                    field: 'isDisabled',
                    title: '状态',
                    align: 'center',
                    width: '80px',
                    formatter: function (value, row, index) {
                        return disabledTools(row);
                    }
                },
                {
                    field: 'sort',
                    title: '排序',
                    align: 'center',
                    formatter: function (value, row, index) {
                        return "<a href='javascript:void(0)' onclick='sortUpdata("+row.id+","+value+")'>"+value+"</a>";
                    }
                },
                {
                    title: '操作',
                    align: 'left',
                    width: '180px',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-info btn-xs" href="javascript:void(0)" onclick="teacherView(\'' + row.id + '\')"><i class="fa fa-search"></i>详情</a> ');
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\',\'85%\',\'98%\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
                        return actions.join('');
                    }
                }]
        }
        $.table.init(options);
    });

    /* 状态显示 */
    function disabledTools(row) {
        if (row.isDisabled === 0) {
            return '<i class=\"fa fa-toggle-on text-info fa-2x\" onclick="updateDisabled(\'' + row.id + '\',\'' + 1 + '\')"></i> ';
        } else {
            return '<i class=\"fa fa-toggle-off text-info fa-2x\" onclick="updateDisabled(\'' + row.id + '\',\'' + 0 + '\')"></i> ';
        }
    }

    //状态
    function updateDisabled(id,isDisabled) {
        table.set();
        var str = "";
        if (isDisabled == 0) {
            str = "确定要启用该讲师吗？"
        } else {
            str = "确定要禁用该讲师吗？"
        }
        $.modal.confirm(str, function () {
            var data = {"id": id, "isDisabled": isDisabled};
            $.operate.submit(prefix + "/disabled.json", "post", "json", data);
        });
    }

    //修改排序
    function sortUpdata(id,sort) {
        layer.prompt({title: '请输入排序，并点击确认。', formType: 3,value:sort}, function(pass, index){
            var data = {"id": id, "sort": pass};
            $.post("/teacher/sort/edit.json",data,function (json) {
                if(json.code === 0){
                    $.modal.msgSuccess(json.msg);
                    location.reload();
                }else {
                    $.modal.msgError(json.msg);
                }
            })
            layer.close(index);
        });

    }

    //详情
    function teacherView(id) {
        var index = layer.open({
            title: '讲师详情',
            content:'/teacher/view.html?id='+id,
            type: 2,
            shade: 0.2,
            maxmin: true,
            shadeClose: true,
            area: ['70%', '85%']
        });
    }
</script>
</body>
</html>